<template>
    <div class="white-box">
        <div class="task-one">
            <div class="task-one__item">
                <span class="task-one__label">用户昵称：</span>
                <el-input placeholder="输入用户昵称" v-model.trim="user_name" clearable></el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">用户UID：</span>
                <el-input placeholder="输入用户UID" v-model.trim="user_id" clearable></el-input>
            </div>
            <div class="task-one__btn task-wrap-btn clearfix">
                <el-button type="primary" :loading="search_btn" :icon="Search" @click="handleSearch">搜索</el-button>
            </div>
        </div>
        <el-table
            class="table-mb"
            v-loading="loading"
            :data="arr_data"
            :header-cell-style="{ background: '#F5F7FA' }"
            element-loading-background="rgba(255, 255, 255, 0.6)"
        >
            <el-table-column label="用户信息" min-width="340" fixed="left">
                <template #default="{ row }">
                    <div class="table-lr">
                        <el-image class="table-lr__img img-round" loading="lazy" :src="proxy.imgUrl + row.face + '!img_400'" fit="cover" v-if="row.face" />
                        <div class="table-lr__right">
                            <div>
                                <p class="lr-title line-one">{{ row.nickname }}</p>
                                <el-tag v-if="row.is_wholesaler == 1">批发商</el-tag>
                            </div>
                            <p class="lr-text">UID：{{ row.uid }}</p>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="批发商" width="100">
                <template #default="{ row }">
                    <span>{{ row.is_wholesaler == 1 ? "是" : "否" }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="mobile" label="手机号"></el-table-column>
            <el-table-column label="批发商返佣比例" width="200">
                <template #default="{ row }">
                    <el-input
                        v-model.trim="row.one_award"
                        clearable
                        placeholder="请输入批发商返佣比例"
                        oninput="value=value.replace(/[^\d.]/g,'')"
                        style="width: 120px"
                        @change="() => inputSort(row)"
                    />
                    %
                </template>
            </el-table-column>
            <el-table-column prop="total_money" label="总消费" min-width="140"></el-table-column>
            <el-table-column prop="orders" label="订单数" min-width="140"></el-table-column>
            <el-table-column prop="created_at_label" label="注册时间" width="200" fixed="right"></el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
            background
            v-model:current-page="page"
            v-model:page-size="pageSize"
            :page-sizes="pageSizeNum"
            :total="totalNums"
            layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>

        <go-back />
    </div>
</template>

<script setup>
import { getCurrentInstance, ref, onMounted, watch } from "vue"
import { useRoute } from "vue-router"
import { Search } from "@element-plus/icons-vue"
import OneLoad from "@mixins/one-load"
import GoBack from "@components/GoBack.vue"

const route = useRoute()
const { proxy } = getCurrentInstance()

let uid = route.query.uid || ""
onMounted(() => {
    if (uid) {
        // getList()
    }
})

/**
 * minxin列表加载
 */
const { page, pageSizeNum, pageSize, loading, arr_data, totalNums, search_btn, pubParams, pubRefreshParams, getdata } = OneLoad()
// 切换每页显示条数
watch(pageSize, (val) => {
    page.value = 1
    pubParams(getList)
})
// 跳转第几页
watch(page, (val) => {
    pubParams(getList)
})
loading.value = false
arr_data.value = ref([
    {
        award_percent: "1.00",
        created_at_label: "2022-01-21 20:49:40",
        distance: 1,
        face: "tenant_ad0234829205b9033196ba818f7a872b/album/202207/20220701_f6138b940aa1d76f85173bd9635006bf.jpg",
        is_wholesaler: 0,
        mobile: "",
        name: "",
        nickname: "时尚花艺flower15025567645",
        one_award: "0.00",
        orders: 0,
        total_money: "0.00",
        uid: 14028,
    },
])
function getList() {
    let params = {
        page: page.value,
        limit: pageSize.value,
        uid: uid,
    }
    getdata("", params)
}

// 搜索
const user_name = ref("")
const user_id = ref("")
const handleSearch = () => {
    search_btn.value = true
    pubRefreshParams(getList)
}

// 设置批发商返佣比例
const inputSort = (row) => {
    if (!row.one_award) {
        proxy.$message({ message: "请输入批发商返佣比例", type: "warning" })
        row.one_award = 0
        return
    }
    proxy.$axios
        .post("", {
            uid: row.uid,
            one_award: row.one_award,
        })
        .then((res) => {
            if (res.data.code == 0) {
                pubParams(getList)
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {})
}
</script>
<script>
export default {
    name: "MemberListSub",
}
</script>

<style lang="less" scoped></style>